<template>
    <li @mouseenter="todoToggleEnter(true)" @mouseleave="todoToggleEnter(false)" :style="{background:bgColor}">
        <label>
            <input type="checkbox" v-model="item.complete" />
            <span>{{item.todocont}}</span>
        </label>
        <button class="btn btn-danger" v-show="showDleBtn" @click="deldetTodoFn">删除</button>
    </li>
</template>

<script>
    import PubSub from "pubsub-js"

    export default {
        name: "TodoItem",
        // props:['item','index'],
        props:{
            'item':Object,
            'index':Number
        },
        data () {
            return {
                bgColor:'#FFF',
                showDleBtn:false
            }
        },
        methods:{
            todoToggleEnter (isEnter) {
                if(isEnter){
                    this.bgColor="#aaa";
                    this.showDleBtn=true;
                }else{
                    this.bgColor="#FFF";
                    this.showDleBtn=false;
                }
            },
            deldetTodoFn () {
                if(window.confirm(`确定删除${this.item.todocont}吗？`)){
                    // this.deletTodo(index);
                    console.log(this.index)
                    let index=this.index;
                    PubSub.publish('deletTodo',index)
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
        margin-bottom:0px;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }
</style>